<template>
    <div class="answer-detailed-increase">
        <!-- 新增弹窗 -->
        <a-modal
         class="answer-detailed"
         :visible="visibleDetailedShow" 
         title="试卷详情" 
         @ok="handleOk" 
         :confirmLoading="confirmLoading"
         @cancel="visibleDetailedShow = false"
         width="100%"
         wrapClassName="full-modal"
         >
         <div v-if="visibleDetailedShow" class="paper-details">
            <p>{{ testPaper.fsjmc }}</p>
            <!-- <p>试卷类型：{{ testPaper.fsjlx }}</p> -->
         </div>
         <div style="margin-left: 20px; font-weight: 600;">
            <div>
                <span>考生姓名：{{ addEditParameter.fksxm }}</span>
            </div>
            <div>
                <span>工作单位：{{ addEditParameter.fgzdw }}</span>
            </div>
            <div>
                <span>联系电话：{{ addEditParameter.flxdh }}</span>
            </div>
            <div>
                <span>得分：{{ testPaper.fdf }}</span>
                <a-button class="blue-btn" style="margin-left: 15px;" type="primary" @click="calculateScore">计算得分</a-button>
            </div>
            <div>
                <span>提交时间：{{ addEditParameter.ftjsj }}</span>
            </div>
            
         </div>
         <div class="big-question" v-if="singleChoiceList.length">
            <span class="title-test-text" v-if="testPaper.fdanxtdbt">{{testPaper.fdanxtdbt}}</span>
            <span class="title-test-text" v-else>一、单选题{{singleChoiceList.length}}道</span>
            <div class="subject-box">
                <div v-for="(item,index) in singleChoiceList" :key="item.id">
                    <div style="margin-left: 30px;">
                        <span class="title-text-item" > {{item.fsjtm}}</span>
                        <span style="display: inline-block;padding: 0 15px;">本题分数：{{ item.ftxfs }}</span>
                        <span style="display: inline-block;">得分：<a-input-number id="inputNumber" v-model:value="item.ftmdf" @blur="ftmdfBlur(item)"/></span>
                    </div>
                    <!-- item.fxh + '.'+ -->
                    <div >
                        <a-radio-group
                        disabled
                         v-for="(nape,Nindex) in item.djdaList" 
                         :key="nape.id"
                         v-model:value="item.selectId"
                         @change="radioChange($event,nape,item)"
                        >
                            <a-radio
                             style="display:block;height:30px;lineHeight:30px" 
                             :value="nape.id"
                            >
                             {{nape.fsjtmxx}}
                             <span style="padding-left: 5px;color: #ed5565;" v-if="nape.fsfzqda === '是'">答案</span>
                             <!-- String.fromCharCode(64 + parseInt(nape.fxh)) -->
                            </a-radio>
                        </a-radio-group>
                    </div>
                </div>
            </div>
         </div>

         <div class="big-question" v-if="multipleChoice.length">
            <span class="title-test-text" v-if="testPaper.fduoxtdbt">{{testPaper.fduoxtdbt}}</span>
                    <span class="title-test-text" v-else>二、多选题{{multipleChoice.length}}道</span>
            <div class="subject-box">
                <div v-for="(item,index) in multipleChoice" :key="item.id">
                    <div>
                        <span class="title-text-item" > {{item.fsjtm}}</span>
                        <span style="display: inline-block;padding: 0 15px;">本题分数：{{ item.ftxfs }}</span>
                        <span style="display: inline-block;">得分：<a-input-number id="inputNumber" v-model:value="item.ftmdf" @blur="ftmdfBlur(item)"/></span>
                    </div>
                    <!-- item.fxh + '.'+ -->
                    <div >
                        <a-checkbox-group
                        disabled
                         v-for="(nape,Nindex) in item.djdaList" 
                         :key="nape.id" 
                         v-model:checkbox="item.selectArr"
                         @change="checkboxChange($event,nape,item)"
                        >
                            <a-checkbox :value="nape.id">
                                {{nape.fsjtmxx}}
                                <span style="padding-left: 5px;color: #ed5565;" v-if="nape.fsfzqda === '是'">答案</span>
                            </a-checkbox>
                            <!-- String.fromCharCode(64 + parseInt(nape.fxh))+ -->
                            <br/>
                        </a-checkbox-group>
                    </div>
                </div>
            </div>
         </div>
         <div class="big-question" v-if="determineList.length">
            <span class="title-test-text" v-if="testPaper.fpandtdbt">{{testPaper.fpandtdbt}}</span>
                    <span class="title-test-text" v-else>三、判断题{{determineList.length}}道</span>
            <div class="subject-box">
                <div v-for="(item,index) in determineList" :key="item.id">
                    <div>
                        <span class="title-text-item" > {{item.fsjtm}}</span>
                        <span style="display: inline-block;padding: 0 15px;">本题分数：{{ item.ftxfs }}</span>
                        <span style="display: inline-block;">得分：<a-input-number id="inputNumber" v-model:value="item.ftmdf" @blur="ftmdfBlur(item)"/></span>
                    </div>
                    <!-- item.fxh + '.'+ -->
                    <div >
                        <a-radio-group
                        disabled
                         v-for="(nape,Nindex) in item.djdaList" 
                         :key="nape.id"
                         v-model:value="item.selectId"
                         @change="radioChange($event,nape,item)"
                        >
                            <a-radio
                             style="display:block;height:30px;lineHeight:30px" 
                             :value="nape.id"
                            >
                             {{nape.fsjtmxx}}
                             <span style="padding-left: 5px;color: #ed5565;" v-if="nape.fsfzqda === '是'">答案</span>
                             <!-- String.fromCharCode(64 + parseInt(nape.fxh)) -->
                            </a-radio>
                        </a-radio-group>
                    </div>
                </div>
            </div>
        </div>
         <div class="big-question" v-if="subjectiveQuestions.length">
            <span class="title-test-text" v-if="testPaper.fzhugtdbt">{{testPaper.fzhugtdbt}}</span>
                    <span class="title-test-text" v-else>四、主观题{{subjectiveQuestions.length}}道</span>
            <div class="subject-box">
                <div v-for="(item,index) in subjectiveQuestions" :key="item.id">
                    <div>
                        <span class="title-text-item" > {{item.fsjtm}}</span>
                        <span style="display: inline-block;padding: 0 15px;">本题分数：{{ item.ftxfs }}</span>
                        <span style="display: inline-block;">得分：<a-input-number id="inputNumber" v-model:value="item.ftmdf" @blur="ftmdfBlur(item)"/></span>
                    </div>
                    <!-- item.fxh + '.'+ -->
                    <div >
                        答：{{ item.fzgtnr }}
                    </div>
                </div>
            </div>
        </div>
        </a-modal>
    </div>
</template>
<script>
import {answerSheetList,updateDjtmFs,reloadDjfs} from './service/index'
export default {
    components:{
    },
    props:{
        addEditParameter:{
            type:Object,
            default:{},
            require:false
        }
    },
    data(){
        return{
            visibleDetailedShow:false,
            confirmLoading:false,
            testPaper:{},
            singleChoiceList:[],//单选
            multipleChoice:[],//多选题
            determineList:[],//判断题
            subjectiveQuestions:[],//主观题
            valObj:{}
        }
    },
    watch:{
        addEditParameter(newval,oldVal){
            //console.log('获取到试卷id',newval)
            answerSheetList({id:newval.id}).then(res=>{
                if(res.code == 200 ){
                    //console.log('获取到试卷内容1',res)
                    this.testPaper = res.result.djjbxx
                    // this.singleChoiceList = res.result.danxList
                    // this.determineList = res.result.pdtList
                    this.singleChoiceList = []
                    this.determineList = []
                    this.multipleChoice = []
                    for (let item of res.result.danxList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='djdaList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfxz==='是'){
                                        item.selectId = item[key][nape].id
                                    }
                                    let arr = this.singleChoiceList.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.singleChoiceList.push(item)
                                    }
                                }
                            }
                        }
                    }
                    for (let item of res.result.pdtList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='djdaList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfxz==='是'){
                                        item.selectId = item[key][nape].id
                                    }
                                    let arr = this.determineList.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.determineList.push(item)
                                    }
                                }
                            }
                        }
                    }
                    res.result.duoxList = res.result.duoxList.map(i=>{return{selectArr:[],...i}} )
                    for (let item of res.result.duoxList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='djdaList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfxz==='是'){
                                        item.selectArr.push(item[key][nape].id)
                                    }
                                    let arr = this.multipleChoice.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.multipleChoice.push(item)
                                    }
                                }
                            }
                        }
                    }
                    this.subjectiveQuestions = res.result.zhugList
                }
            })
        }
    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.valObj = val
            answerSheetList({id:val.id}).then(res=>{
                if(res.code == 200 ){
                    //console.log('获取到试卷内容',res)
                    this.testPaper = res.result.djjbxx
                    // this.singleChoiceList = res.result.danxList
                    // this.determineList = res.result.pdtList
                    for (let item of res.result.danxList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='djdaList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfxz==='是'){
                                        item.selectId = item[key][nape].id
                                    }
                                    let arr = this.singleChoiceList.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.singleChoiceList.push(item)
                                    }
                                }
                            }
                        }
                    }
                    for (let item of res.result.pdtList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='djdaList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfxz==='是'){
                                        item.selectId = item[key][nape].id
                                    }
                                    let arr = this.determineList.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.determineList.push(item)
                                    }
                                }
                            }
                        }
                    }
                    res.result.duoxList = res.result.duoxList.map(i=>{return{selectArr:[],...i}} )
                    for (let item of res.result.duoxList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='djdaList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfxz==='是'){
                                        item.selectArr.push(item[key][nape].id)
                                    }
                                    let arr = this.multipleChoice.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.multipleChoice.push(item)
                                    }
                                }
                            }
                        }
                    }
                    this.subjectiveQuestions = res.result.zhugList
                }
            })
        },
        ftmdfBlur(item){
            updateDjtmFs({id:item.id,ftmdf:item.ftmdf}).then(res=>{
                if(res.code == 200){
                    this.getData(this.valObj)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        calculateScore(){
            reloadDjfs({djid:this.valObj.id}).then(res=>{
                if(res.code == 200){
                    this.getData(this.valObj)
                    this.$message.success(res.message)
                    this.$emit('refreshTableChange')
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        radioChange(val,nape,item){//单选

        },
        checkboxChange(val,nape,item){//多选

        },
        handleOk(){

        },
    }

}

</script>
<style lang="less">
/* .ant-form-item-label{
    font-weight: 600;
} */
.answer-detailed{
 .ant-modal-title{
    font-weight: 600;
 }
//  .ant-modal-header{
//     background: rgb(222, 229, 237) !important;
//  }
 .ant-upload-list{
    display: none !important;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 .paper-details{
    display: flex;
    justify-content: space-evenly;
    font-size: 20px;
    font-weight: 600;
 }
 .big-question{
    margin: 20px 0;
 }
 .title-test-text{
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 10px;
 }
 .ant-radio-group,.ant-checkbox-group {
    display: block !important;
}
.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after{
    border-color:#2F54EB !important;
}
.ant-radio-disabled .ant-radio-inner:after {
    background-color: #2F54EB !important;
}
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow-y: auto;
  }
  .ant-modal-body {
    flex: 1;
  }
}

    .ant-modal-footer{
    display: none !important;
 }
}

</style>